<template>
  <div class="content-page">
      <div class="content-nav">
        <div class="operation-nav">
            <el-button type="primary" @click="goBackPage" icon="arrow-left">返回列表</el-button>
        </div>
      </div>
      <div class="content-main">
        <div class="form-table-box">
          <el-form ref="infoForm" :rules="infoRules" :model="infoForm" label-width="120px">
            <el-form-item label="名字" prop="name">
                <el-input v-model="infoForm.name"></el-input>
            </el-form-item>
            <el-form-item label="代号" prop="code">
                <el-input v-model="infoForm.code"></el-input>
            </el-form-item>
            <el-form-item label="客户编号" prop="customerName">
                <el-input v-model="infoForm.customerName"></el-input>
                <div class="form-tips">打印电子面单，需要填写</div>
            </el-form-item>
            <el-form-item label="月结账号" prop="monthCode">
                <el-input v-model="infoForm.monthCode"></el-input>
                <div class="form-tips">打印电子面单，需要填写</div>
            </el-form-item>
            <el-form-item label="排序" prop="sort_order">
                <el-input-number v-model="infoForm.sort_order" :min="1" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitInfo">确定保存</el-button>
                <el-button @click="goBackPage">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
</template>

<script>
    import { addShipper , getShipperById, updateShipper } from '@/api/shipper'
    export default {
        data() {
            return {
                infoForm: {
                    name: '',
                    code: '',
                    customerName:'',
                    monthCode:'',
                    sort_order: 0
                },
                infoRules: {
                    name: [
                        {required: true, message: '请输入快递公司名字', trigger: 'blur'},
                    ],
                    code: [
                        {required: true, message: '请输入快递公司代号', trigger: 'blur'},
                    ],
                },
            }
        },
        methods: {
            goBackPage() {
                this.$router.go(-1);
            },
            onSubmitInfo() {
              // 新增快递
              this.$refs['infoForm'].validate(async (valid) => {
                if (valid) {
                  let res = {}
                  if(this.infoForm.id){
                    res = await updateShipper(this.infoForm)
                  }else{
                    res = await addShipper(this.infoForm)
                  }
                  if(res.code === 0){
                    this.$message({
                        type: 'success',
                        message: '保存成功'
                    });
                    this.$refs['infoForm'].resetFields()
                    this.$router.go(-1)
                  }else {
                    this.$message({
                        type: 'error',
                        message: '保存失败'
                    })
                  }
                  
                } else {
                  return false;
                }
              });
            },
            async getInfo(id) {
                //加载快递公司详情
                let that = this
                let res = await getShipperById(id)
                if(res.code === 0){
                  if(res.data){
                    this.infoForm = res.data
                  }else{
                    this.$message({
                      type:'error',
                      message:'不存在该快递，请检查id是否正确'
                    })
                  }
                }else {
                  this.$message({
                    type:'error',
                    message:'获取快递信息失败'
                  })
                }
            }

        },
        components: {},
        mounted() {
            let id = this.$route.query.id
            if(id){
              this.getInfo(id);
            }
        }
    }

</script>

<style lang="scss" scoped>
  .content-page{
    .content-nav{
      .operation-nav{
        text-align: right;
      }
    }
    .content-main{
      margin-top:20px;
      .form-table-box{
        .el-form{
          width: 600px;
        }
      }
    }
  }
</style>

